<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2023-02-02 10:42:04
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-02-02 15:07:53
-->
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>千锋选课系统</title>
		<style type="text/css">
			select {
				width: 200px;
				height:350px;
			}
			input {
				position: absolute;
				width: 100px;
				margin-left: -150px;
			}
		</style>
		<script>
			var leftSelect;
			var rightSelect;
			window.onload = function(){
				leftSelect = document.getElementById("leftSelect");
				rightSelect = document.getElementById("rightSelect");
			}

			
			// 将左边选中的内容添加到右边 
			function right(){
				// 选中所有的options
				var options = leftSelect.options; 
				// alert(options.length);
				// 遍历所有的options 判断是否被选中 
				// 如果被选中 将其添加到右边的select中
				for(var i=0;i<options.length;i++){
					if(options[i].selected){ // 如果被选中
						// 将其添加到右边的select中
						rightSelect.appendChild(options[i--]);
						//倒着判断往里放 因为 如果正着放 
						//会导致后面的元素往前面移动 但是索引一致累加
						// 导致后面的元素被跳过
					}
				}
				
			}


			function left(){
				var options = rightSelect.options; 
				// alert(options.length);
				// 遍历所有的options 判断是否被选中 
				// 如果被选中 将其添加到右边的select中
				for(var i=0;i<options.length;i++){
					if(options[i].selected){ // 如果被选中
						// 将其添加到右边的select中
						leftSelect.appendChild(options[i--]);
						//倒着判断往里放 因为 如果正着放 
						//会导致后面的元素往前面移动 但是索引一致累加
						// 导致后面的元素被跳过
					}
			}

		}

		function up(){
			var options = leftSelect.options;

			for(var i=0;i<options.length;i++){
				if(options[i].selected){
					if(i==0){
						return 
					}
					leftSelect.insertBefore(options[i],options[i].previousElementSibling);		
				}
			}
		}


		function swap_handle(m1,m2){
			var temp = m1.cloneNode(true);
			// 节点交换 必须是节点和节点交换 不能 空和节点交换
			m2.parentNode.replaceChild(temp,m2);
			m1.parentNode.replaceChild(m2,m1);
			temp.parentNode.replaceChild(m1,temp);
			// temp  m2
			// m2  m1
			// m1  temp
			

		}

		function up1(){
			var options = leftSelect.options;

			for(var i=0;i<options.length;i++){
				if(options[i].selected){
					if(i==0){
						return 
					}
					swap_handle(options[i],options[i-1]);
				}
			}

			var options = rightSelect.options;

			for(var i=0;i<options.length;i++){
				if(options[i].selected){
					if(i==0){
						return 
					}
					swap_handle(options[i],options[i-1]);
				}
			}
		}

		function down1(){
			var options = leftSelect.options;

			for(var i=options.length-1;i>=0;i--){
				if(options[i].selected){
					if(i==options.length-1){
						return 
					}
					swap_handle(options[i],options[i+1]);
				}
			}

			var options = rightSelect.options;

			for(var i=options.length-1;i>=0;i--){
				if(options[i].selected){
					if(i==options.length-1){
						return 
					}
					swap_handle(options[i],options[i+1]);
				}
			}
		}

		function down(){
			var options = leftSelect.options;

			// for(var i=options.length-1;i>=0;i--){
			// 	if(options[i].selected){
			// 		// console.log(options[i].nextElementSibling);
			// 		if(i==options.length-1){
			// 			return 
			// 		}
			// 		leftSelect.insertBefore(options[i].nextElementSibling,options[i]);

			// 	}
			// }

			// for(var i=0;i<options.length;i++){
			// 	if(options[i].selected){
			// 		// console.log(options[i].nextElementSibling);
			// 		if(i==options.length-1){
			// 			return 
			// 		}
			// 		leftSelect.insertBefore(options[i].nextElementSibling,options[i]);
			// 		break;		
			// 	}
			// }
		}
		function cancelLeft(){
			var selectLeft = document.getElementById("leftSelect");
			var options = selectLeft.options;
			for(var i=0;i<options.length;i++){
				if(options[i].selected){
					options[i].selected = false;
				}
			}

		}

		function cancelRight(){
			var selectLeft = document.getElementById("rightSelect");
			var options = selectLeft.options;
			for(var i=0;i<options.length;i++){
				if(options[i].selected){
					options[i].selected = false;
				}
			}

		}
		
		</script>
		
	</head>
	<body>
		<center>
			<fieldset style="width:800px;">
				<legend>请选择课程</legend>
				<br>
				<select id="leftSelect" multiple="multiple" size="23" style="margin-right:200px;" ondblclick="right();">
					<option>职场新动力英语1</option>
					<option>职场新动力英语2</option>
					<option>职场新动力英语3</option>
					<option>职场新动力数学1</option>
					<option>职场新动力数学2</option>
					<option>职场新动力数学3</option>
					<option>计算机基础</option>
					<option>网页设计</option>
					<option>C语言程序设计</option>
					<option>vue</option>
					<option>react</option>
					<option>uni-app</option>
					<option>node.js/CMS案例</option>
					<option>数据结构与算法</option>
					<option>Struts/hibernate/Mybatis</option>
					<option>springMVC/SSH/WebService</option>
					<option>项目实训1</option>
					<option>项目实训2</option>
					<option>项目实训3</option
				</select>
				<input type="button" value="→ 添加 →" style="margin-top:50px;" onclick="right();">
				<input type="button" value="← 删除 ←" style="margin-top:100px;" onclick="left();">
				<input type="button" value="↑ 上移 ↑" style="margin-top:150px;" onclick="up1();">
				<input type="button" value="↓ 下移 ↓" style="margin-top:200px;" onclick="down1();">
				<input type="button" value="取消左选" style="margin-top:250px;" onclick="cancelLeft()	;">
				<input type="button" value="取消右选" style="margin-top:300px;" onclick="cancelRight();">
		
				<select id="rightSelect" multiple="multiple" size="23"  ondblclick="left();" onclick="cancelLeft();">
				</select>
				<br>
				<br>
			</fieldset>
		</center>

		
	</body>
</html>